<template>
  <view class="album-container">
    <u-popup
			v-model="show"
			mode="bottom"
      :closeable="false"
      close-icon-color="#888"
			border-radius="16"
			@close="close"
			z-index="10"
			width="600">
      <view class="select-album-popup">
        <view class="title">
          <text>{{ title }}</text>
          <u-icon name="close-circle" color="#c0c0c0" size="48" class="close-icon" @click="show = false"></u-icon>
        </view>
        <!-- 专辑内容 -->
        <view class="album-container">
          <block
            v-for="item in albumList"
            :key="item.id">
            <view
              v-if="item.id != currentAlbumId"
              class="album-item"
              @click="handleAlbum(item)">
              <view class="album-cover">
                <block v-if="item.artworksInfo && item.artworksInfo.length === 0">
                  <image
                    src="https://qiniu-res.jintianwang.cc/20221109151006-heji.png"
                    mode="scaleToFill"
                    class="album-cover-image"
                  />
                </block>
                <block v-else-if="item.artworksInfo && item.artworksInfo.length < 4">
                  <image
                    :src="item.artworksInfo[0].video_cover_url || item.artworksInfo[0].cover_url"
                    mode="scaleToFill"
                    class="album-cover-image"
                  />
                </block>
                <block v-else-if="item.artworksInfo && item.artworksInfo.length >= 4">
                  <block
                    v-for="(artworksItem, index) in item.artworksInfo"
                    :key="artworksItem.id">
                    <image
                      v-if="index < 4"
                      :src="artworksItem.video_cover_url || artworksItem.cover_url"
                      mode="scaleToFill"
                      class="album-cover-image2"
                    />
                  </block>
                </block>
              </view>
              <view class="album-name">
                {{ item.name }}
                <!-- <text class="artworks-num">{{ item.artworksInfo.length }}</text> -->
              </view>
            </view>
          </block>
        </view>
        <!-- 操作栏 -->
        <view class="btn-container">
          <u-button class="btn" plain hover-class="none"
            :custom-style="{
              color: '#56d39d',
            }"
            @click="createAlbum.popupShow = true">
            <text class="huiju-iconfont huiju-icon-ico_classify_unfold"></text>
            <text>创建专辑</text>
          </u-button>
          <u-button
            class="btn"
            type="primary"
            hover-class="none"
            :custom-style="{
              backgroundColor: '#56d39d',
            }"
            @click="deleteItemAlbum"
            :disabled="disabledMove"
            :loading="btnLoading">
            <text class="huiju-iconfont huiju-icon-yidong-xuanzhong-12"></text>
            <text>移出专辑</text>
          </u-button>
        </view>
      </view>
    </u-popup>
    <!-- 创建专辑 -->
    <CreateArtworksAlbum
      :popup-show="createAlbum.popupShow"
      :popup-title="createAlbum.popupTitle"
      :album-info="createAlbum.albumInfo"
      @close="closeArtworksAlbum"
      @success="findAlbumByAuthorIdAndTypeIdFn"></CreateArtworksAlbum>
  </view>
</template>

<script>
import { findAlbumByAuthorIdAndTypeId } from '@/api/artworks';
import CreateArtworksAlbum from '@/components/createArtworksAlbum/createArtworksAlbum';
export default {
  components: {
    CreateArtworksAlbum
  },
  props: {
    popupShow: {
      type: Boolean,
      default: false,
    },
    disabledMove: {
      type: Boolean,
      default: true,
    },
    popupTitle: {
      type: String,
      default: '选择专辑',
    },
    albumInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      createAlbum: {
        popupShow: false,
        popupTitle: '创建专辑',
        albumInfo: {
          name: '', // 专辑名称
          is_top: '', // 是否置顶
          author_id: '', // 主页id
          artworks_type_id: '' // 作品类型
        }
      },
      currentAlbumId: '', // 当前专辑id
      albumList: [], // 专辑列表
      show: this.popupShow,
      title: this.popupTitle,
      searchForm: this.albumInfo,
      btnLoading: false,
    }
  },
  watch: {
    popupShow: {
      immediate: true,
      deep: true,
      handler(val, oldValue) {
        this.show = val;
        this.findAlbumByAuthorIdAndTypeIdFn();
      }
    },
    popupTitle: {
      immediate: true,
      handler(val, oldValue) {
        this.title = val;
      }
    },
    albumInfo: {
      immediate: true,
      deep: true,
      handler(val, oldValue) {
        this.searchForm = val;
        this.createAlbum.albumInfo.author_id = val.author_id;
        this.createAlbum.albumInfo.artworks_type_id = val.type;
        console.log(val.type);
        if (val.album_id) {
          this.currentAlbumId = val.album_id;
        }
      }
    }
  },
  methods: {
    // 获取专辑
    findAlbumByAuthorIdAndTypeIdFn() {
      findAlbumByAuthorIdAndTypeId({
          author_id: this.searchForm.author_id,
          artworks_type_id: this.searchForm.type
        }).then(result => {
        if (result && result.data && result.data.length > 0) {
          let list = result.data;
          this.albumList = list;
        } else {
          this.albumList = [];
        }
      })
    },

    // 移出专辑
    deleteItemAlbum() {
      this.$emit('deleteItemAlbum');
    },

    // 关闭
    close(){
      this.$emit('close', false);
    },

    // 点击专辑
    handleAlbum(albumData) {
      this.$emit('clickAlbum', albumData);
    },

    // 关闭
    closeArtworksAlbum() {
      this.createAlbum.popupShow = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.select-album-popup{
  position: relative;
  padding: 32rpx;

  .title{
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 32rpx;
    position: relative;

    .close-icon{
      position: absolute;
      right: 32rpx;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }

  .btn-container{
    display: flex;
    padding-top: 32rpx;
    justify-content: space-between;

    .btn{
      flex: 1;
    }
    .btn:nth-child(1){
      margin-right: 24rpx;
    }
  }

  .album-container{
    padding: 24rpx 0;
    height: calc(100vh - 500rpx);
    overflow-y: auto;
    .album-item{
      background: #f5f6f6;
      padding: 24rpx 0 24rpx 24rpx;
      border-radius: 8rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;

      .album-cover{
        border-radius: 8rpx;
        padding: 4rpx;
        height: 80rpx;
        width: 80rpx;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }

      .album-cover-image{
        width: 72rpx;
        height: 72rpx;
        border-radius: 4rpx;
      }

      .album-cover-image2{
        width: 36rpx;
        height: 36rpx;
        border-radius: 4rpx;
      }

      .album-name{
        margin-left: 24rpx;
        color: #666;
        font-size: 28rpx;
      }

      .artworks-num{
        font-size: 24rpx;
        border-radius: 20rpx;
        min-width: 40rpx;
        padding: 4rpx 12rpx;
        background-color: #f3f7fb;
        margin-left: 12rpx;
        color: $uni-color-primary;
      }
    }
  }
}
</style>
